<template>
  <div class="user">
    <h1>用户组件</h1>
    <h2 class="cc">用户名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>性别:{{ sex }}</h2>
    <h2>家庭住址:{{ address }}</h2>
    <button @click="pushUserName">给App组件发送用户名</button>
    <button @click="pushUserNameToSchool">给School组件发送用户名</button>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      name: "张三",
      age: 18,
      sex: "男",
      address: "北京市",
    };
  },
  methods: {
    getMessage() {
      return "这是一个组件";
    },
    pushUserName() {
      this.$emit("showUserName", this.name);
    },
    pushUserNameToSchool() {
      console.log("推送给School组件");
      this.$bus.$emit("pushUserNameToSchool",this.name);
    },
  },
};
</script>

<style scoped>
.user {
  background-color: rgb(36, 230, 146);
  text-align: center;
}
.cc {
  color: gray;
}
</style>
